<template>
<div class="menu">
    <div class="menu-int">
        <logoVue></logoVue>
        <menuListVue :menu_data="menuList"></menuListVue>
    </div>
</div>
</template>

<script>
import logoVue from './Menu/logo.vue'
import menuListVue from './Menu/menuList.vue'
export default {
    data() {
        return {
            menuList: [{
                    id: 1,
                    name: '一句诗词',
                    path: '/poetry',
                    linked: true
                },
                {
                    id: 2,
                    name: '励志句子',
                    path: '/encourage',
                    linked: false
                },
                {
                    id: 3,
                    name: '毒鸡汤',
                    path: '/poison',
                    linked: false
                },

            ]
        }
    },
    components: {
        logoVue,
        menuListVue
    }
}
</script>

<style lang="scss" scoped>
.menu {
    width: 220px;
    height: 100%;
    background-color: #171717;
    border-right: 1px solid #eee;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    overflow: hidden;

    .int {
        overflow-y: scroll;
        height: 100%;
        margin-right: -18px;
    }
}
</style>
